<script setup>
import { ref,reactive,onMounted } from 'vue';
import axios from "@/utils/axios.js";

const tableRef = ref()
const data=reactive({
  list:null,
  total:0,
  page:1,
  limit:5,
  showAdd:false,
  showEdit:false,
  teachers:null,
  addForm:{
    name:'',
    grade:'',
    teacherId:''
  },
  editForm:{
    id:'',
    name:'',
    grade:'',
    teacherId:''
  }
})
//初始化
const init=()=>{
  axios.get('/api/classes/page',{
    params:{
      page:data.page,
      limit:data.limit
    }
  }).then(res=>{
    console.log("班级展示",res)
    data.list=res.data.records
    data.total=res.data.total
  })

  axios.get("/api/teachers/list").then(res=>{
    data.teachers=res.data
    console.log("我们的老师",data.teachers)
    if (data.teachers.length>0){
      data.addForm.teacherId=data.teachers[0].id
    }
  })
}
onMounted(()=>{
  init()
})
//分页
const jump = (val) => {
  data.page = val
  init();
}
//添加
const BeforeClose = () => {
  data.addForm = {
    name:'',
    grade:'',
    teacherId:data.teachers[0].id
  }
}
const doAdd=()=>{
  axios.post('/api/classes/add',data.addForm).then(res=>{
    if(res.code!=200){
      ElMessage.error(res.msg)
      return
    }
    ElMessage({
      message: '添加成功',
      type: 'success',
      duration: 1000,
      onClose: () => {
        init()
      }
    })
    data.showAdd=false
  })
}
//删除
const del=(id)=>{
  axios.delete('/api/classes/delById?id='+id).then(res=>{
    if(res.code!=200){
      ElMessage.error(res.msg)
      return
    }
    ElMessage({
      message: '删除成功',
      type: 'success',
      duration: 1000,
      onClose: () => {
        init()
      }
    })
  })
}
//批量删除
const delSelected = () => {
  const rows = tableRef.value.getSelectionRows()
  const ids = rows.map(row => row.id)
  if (ids.length === 0) {
    ElMessage.error('请选择要删除的教师')
    return
  }
  axios.post('/api/classes/delBatch', ids).then(res => {
    if (res.code !== 200) {
      ElMessage.error(res.msg)
      return
    }
    ElMessage({
      message: '删除成功',
      type: 'success',
      duration: 1000,
      onClose: () => {
        init()
      }
    })
  })
}
//修改
const edit=(row)=>{
  data.editForm=row
  data.showEdit=true
}
const doEdit=()=>{
  axios.post('/api/classes/update',data.editForm).then(res=>{
    if(res.code!=200){
      ElMessage.error(res.msg)
      return
    }
    ElMessage.success("修改成功")
    data.showEdit=false
    init()
  })
}
</script>

<template>
  <div class="employ">
    <h1>班级管理</h1>
    <div class="btu">
      <el-button type="danger" size="mini" @click="delSelected" icon="Delete">删除选中</el-button>
      <el-button type="primary" size="mini" @click="data.showAdd = !data.showAdd" icon="Plus">添加班级</el-button>
    </div>
    <el-table :data="data.list" ref="tableRef" style="width: 100%">
      <el-table-column type="selection" width="55" label="选择"></el-table-column>
      <el-table-column label="序号" type="index" align="center" width="100"/>
      <el-table-column prop="id" label="ID" align="center"></el-table-column>
      <el-table-column prop="name" label="班级名称" align="center"></el-table-column>
      <el-table-column prop="grade" label="年级" align="center"></el-table-column>
      <el-table-column prop="teacherId" label="教师ID" align="center"></el-table-column>
      <el-table-column prop="createdAt" label="创建时间" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button color="green" size="mini" circle icon="edit" @click="edit(scope.row)"></el-button>
          <el-button type="danger" size="mini" circle icon="delete" @click="del(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background style="margin-top: 10px"
        layout="total, prev, pager, next, jumper"
        :total="data.total"
        :page-size="data.limit"
        :current-page="data.page"
        @current-change="jump"
    />
    <!--添加班级弹窗-->
    <el-dialog :close-on-click-modal="false" draggable="true" v-model="data.showAdd" @close="BeforeClose"
               title="添加班级" overflow="ture"    width="500" style="height: 500px">
      <el-form label-width="120px">
        <el-form-item label="班级名称" prop="name">
          <el-input v-model="data.addForm.name" placeholder="请输入班级名称"></el-input>
        </el-form-item>
        <el-form-item label="年级" prop="grade">
          <el-input v-model="data.addForm.grade" placeholder="请输入班级年级"></el-input>
        </el-form-item>
        <el-form-item label="所属教师">
          <el-select v-model="data.addForm.teacherId" placeholder="请选择教师">
            <el-option v-for="item in data.teachers" :label="item.name" :value="item.id" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提交">
          <el-button type="primary" size="mini" @click="doAdd">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--修改班级弹窗-->
    <el-dialog :close-on-click-modal="false" draggable="true" v-model="data.showEdit"
               title="修改班级" overflow="ture"    width="500" style="height: 500px">
      <el-form label-width="120px">
        <el-form-item label="班级名称" prop="name">
          <el-input v-model="data.editForm.name" placeholder="请输入班级名称"></el-input>
        </el-form-item>
        <el-form-item label="年级" prop="grade">
          <el-input v-model="data.editForm.grade" placeholder="请输入班级年级"></el-input>
        </el-form-item>
        <el-form-item label="所属教师">
          <el-select v-model="data.editForm.teacherId" placeholder="请选择教师">
            <el-option v-for="item in data.teachers" :label="item.name" :value="item.id" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提交">
          <el-button type="primary" size="mini" @click="doEdit">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<style scoped>
.employ {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
